
//放大镜部分下标的获取
$(function(){
      $lis=$(".container .img-list li")
      $small_img=$(".container .small-img")
      $big_img=$(".container .big-img")
  
            for(var i=0;i<$lis.length;i++){
                $lis[i].onmouseover=function(){
                    $(this)
                        .addClass("active")
                        .siblings()
                        .removeClass("active");
                        var index = $(this).index(".container .img-list li");
                     //   console.log(index);

                        $small_img
                        .removeClass("active") 
                        .eq(index)
                        .addClass("active")

                         $big_img
                        .removeClass("active1") 
                        .eq(index)
                        .addClass("active1") 
                }
            } 
      })
          
 function Magnifier() {
                  this.small_img_ele = $(".small-img");
                  this.big_img = $(".big-img img")
                  this.big_img_ele = $(".big-img");
                  this.focus_ele = $(".focus");
                  this.container_ele = $(".container");
                  this.container_offset = this.container_ele.offset()    
                  this.focus_size = {
                        width : this.focus_ele.width(),
                        height : this.focus_ele.height()
                  }
            }
            Magnifier.prototype.bindEvent = function () {
                  var mag = this;
                  this.small_img_ele.mouseover(function () {
                        mag.toggle("show");
                  })
                  this.small_img_ele.mouseout(function () {
                        mag.toggle("hide");
                  })
                  this.small_img_ele.mousemove( function( e = event ){
                        mag.focusMove( e.clientX , e.clientY );
                        mag.bigImgMove();
                  });
            }
            Magnifier.prototype.toggle = function( type ){
                  switch( type ){
                        case "show" : 
                              this.big_img_ele.show()
                              this.focus_ele.show();
                              break;
                        case "hide" :     
                              this.big_img_ele.hide();
                              this.focus_ele.hide()
                              break;
                  }
            }

            Magnifier.prototype.focusMove = function( x , y ){
                  var _left =  x - this.container_offset.left - this.focus_size.width / 2 ; 
                  var _top  = y - this.focus_size.height / 2
                  if(_left < 0 ){
                        _left = 0;
                  }
                  if(_top < 0 ){
                        _top = 0;
                  }
                  if( _left > 150 ){
                        _left = 150;
                  }
                  if( _top > 150 ){
                        _top = 150;
                  }

                  this.focus_ele.css({
                        left : _left,
                        top  : _top 
                  })

                  this.prop_left = _left / 150 ; 
                  this.prop_top  = _top / 150;
            }
            Magnifier.prototype.bigImgMove = function(){
                  this.big_img.css({
                        left : -this.prop_left * 250,
                        top  : -this.prop_top  * 250
                  })
                  //console.log(this.big_img.left);
            }
            var m = new Magnifier();
            m.bindEvent();
            //列表-详情跳转
            //console.log( location.hash)

            function getId(){
                  return location.hash.split("=")[1];
                  
            }
           
            window.onload = function () {
                  load()
                    .done(function (data) {
          
                      render(data.list);
                     
                     /*  $(".lazy").lazyload(); */
                    })
                }
          
                function load() {
                  var options = {
                    url: "http://127.0.0.1:8080/static/data/list.json" + getId()
                  }
                  return $.ajax(options)
                   .done( function( res ){
                    // console.log(res);
                       render(res)
                 })   
          
                }
            var price = document.querySelector(".renderprice");
            var promotion_price = document.querySelector(".render-promotion-price");
            var monthsalecount=document.querySelector(".render-monthsalecount")
            var comment = document.querySelector(".render-comment");
            var integral=document.querySelector(".integral")
            var mag_simg_url11=document.getElementById("mag-simg-url1")
            var mag_simg_url22=document.getElementById("mag-simg-url2")
            var mag_simg_url33=document.getElementById("mag-simg-url3")
            var mag_simg_url44=document.getElementById("mag-simg-url4")
            var mag_simg_url55=document.getElementById("mag-simg-url5")

           var mag_bimg_url11=document.getElementById("mag-bimg-url1")
           var mag_bimg_url22=document.getElementById("mag-bimg-url2")
           var mag_bimg_url33=document.getElementById("mag-bimg-url3")
           var mag_bimg_url44=document.getElementById("mag-bimg-url4")
           var mag_bimg_url55=document.getElementById("mag-bimg-url5")

            var mag_listimg_url11=document.getElementById("mag-listimg-url1")
            var mag_listimg_url22=document.getElementById("mag-listimg-url2")
            var mag_listimg_url33=document.getElementById("mag-listimg-url3")
            var mag_listimg_url44=document.getElementById("mag-listimg-url4")
            var mag_listimg_url55=document.getElementById("mag-listimg-url5")

            var color_img11=document.getElementById("color-img1")
           var rig_img11=document.getElementById("rig-img1")
           var rig_img22=document.getElementById("rig-img2")
           var rig_img33=document.getElementById("rig-img3")
           var rig_img44=document.getElementById("rig-img4")

                var good_list_img11=document.getElementById("good-list-img1")
                var good_list_img22=document.getElementById("good-list-img2")
                var good_list_img33=document.getElementById("good-list-img3")
                var good_list_img44=document.getElementById("good-list-img4")
                var good_list_img55=document.getElementById("good-list-img5")

            function render( res ){
            var  res=JSON.parse(res)
           // console.log(res.list[0].comment);
                 
                        mag_simg_url11.src= res.list[0].mag_simg_url1
                        mag_simg_url22.src=res.list[0].mag_simg_url2
                        mag_simg_url33.src= res.list[0].mag_simg_url3
                        mag_simg_url44.src=res.list[0].mag_simg_url4
                        mag_simg_url55.src=res.list[0].mag_simg_url5

                        mag_bimg_url11.src=res.list[0].mag_bimg_url1
                        mag_bimg_url22.src=res.list[0].mag_bimg_url2
                        mag_bimg_url33.src=res.list[0].mag_bimg_url3
                        mag_bimg_url44.src=res.list[0].mag_bimg_url4
                        mag_bimg_url55.src=res.list[0].mag_bimg_url5

                        mag_listimg_url11.src=res.list[0].mag_listimg_url1
                        mag_listimg_url22.src=res.list[0].mag_listimg_url2
                        mag_listimg_url33.src=res.list[0].mag_listimg_url3
                        mag_listimg_url44.src=res.list[0].mag_listimg_url4
                        mag_listimg_url55.src=res.list[0].mag_listimg_url5

                        rig_img11.src=res.list[0].rig_img1
                        rig_img22.src=res.list[0].rig_img2
                        rig_img33.src=res.list[0].rig_img3

                        good_list_img11.src=res.list[0].good_list_img1
                        good_list_img22.src=res.list[0].good_list_img2
                        good_list_img33.src=res.list[0].good_list_img3
                        good_list_img44.src=res.list[0].good_list_img4
                        good_list_img55.src=res.list[0].good_list_img5

                        price.innerHTML=res.list[0].price
                        promotion_price.innerHTML=res.list[0].promotion_price
                        monthsalecount.innerHTML=res.list[0].monthsalecount
                        comment.innerHTML=res.list[0].comment
                        integral.innerHTML=res.list[0].integral
                        color_img11.innerHTML=res.list[0].color_img1
                  
                  /* if(location.hash==="#id=16179943"){
                        mag_simg_url11.src= res[1].mag_bimg_url1
                  } */

              //  console.log(res[0].mag_bimg_url1);
                  
            


            }
            

